<template>
	<view class="container">
		<view class="top flex_between">
			<u-icon name="arrow-left" color="balck" size="22"
				style="position: absolute;left: 20rpx;z-index: 50;margin-top: -200rpx;" @click="backtohome"></u-icon>
			<view class="userinfo flex">
				<!-- <view class="touxing" style="width: 80rpx;height: 80rpx;overflow: hidden;border-radius: 50%;"> -->
				<!-- <image class="touxiang " :src="userinfo.avatar || '@/static/image/mine/avatar.jpg'" mode="widthFix" 
					style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right: 24rpx;">
					</image> -->
				<!-- </view> -->
				<view class="right flex">
					<image :src="userinfo.avatar || '../../static/image/mine/avatar.jpg'"
						style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				</view>
				<view class="info">

					<view class="name"
						style="width: 400rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
						{{userinfo.nick_name}}
					</view>
					<view class="id">ID：{{userinfo.id}}</view>
				</view>
			</view>
			<image src="../../static/image/mine/ic_shezhi@3x.png" style="width: 48rpx;height: 48rpx;" mode="widthFix"
				@tap="toPath('/pages/setting/setting')">
			</image>
		</view>
		<view class="content">
			<view class="wallet">
				<view class="flex_between">
					<view class="left">
						<view class="title">我的钱包</view>
						<view class="detail">{{userinfo.price}}</view>
					</view>
					<view class="right flex_center">
						<image src="../../static/image/mine/bt@3x.png" mode="widthFix" style="width: 184rpx;"></image>
					</view>
				</view>
			</view>
			<view class="list flex">
				<view class="item col_center" v-for="item in list" @tap="ToOrder(item)">
					<image class="img" :src="item.url"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="nav_list">
				<view class="item flex_between" v-for="item in navList" @click="navTo(item)">
					<view class="title flex">
						<image class="nav_icon" :src="item.url" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="code" v-if="item.status=='code'" style="color: #cccccc;margin: 0 20rpx 0 auto;">
						{{userinfo.code}}
					</view>
					<uni-icons type="forward" color="#cccccc" size="12"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <u-tabbar :value="value1" @change="change1"  inactive-color="#7C8491" activeColor="#275515" :fixed="true"
			:placeholder="false" :safeAreaInsetBottom="false">
			<u-tabbar-item v-for="(item, idx) in tabList" :text="item.labelText">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconPath"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar> -->
	</view>
</template>

<script>
	import {
		user_info
	} from '@/api/api.js'
	export default {
		data() {
			return {
				value1: 0,
				isHomeTabClicked: false,
				tabList: [{
						labelText: '首页',
						url: '/pages/tabbar/home',
						iconPath: '/static/image/tabbar/tabbar1.png',
						activeIconPath: '/static/image/tabbar/activetabbar1.png'
					},
					{
						labelText: '论坛',
						url: '/pages/tabbar/forum',
						iconPath: '/static/image/tabbar/tabbar2.png',
						activeIconPath: '/static/image/tabbar/activetabbar2.png'
					},
					{
						labelText: '客服',
						url: '/pages/tabbar/service',
						iconPath: '/static/image/tabbar/tabbar3.png',
						activeIconPath: '/static/image/tabbar/activetabbar3.png'
					},

					{
						labelText: '商城',
						url: '/pages/tabbar/store',
						iconPath: '/static/image/tabbar/tabbar4@3x.png',
						activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
					}
				],
				userinfo: {},
				list: [{
					id: 1,
					name: "待付款",
					url: require("../../static/image/mine/ic_daifukuan@3x.png"),
					path: "/pages/shop/order/orderList?key=1"
				}, {
					id: 2,
					name: "待发货",
					url: require("../../static/image/mine/ic_dabaozhong@3x.png"),
					path: "/pages/shop/order/orderList?key=2"
				}, {
					id: 3,
					name: "待收货",
					url: require("../../static/image/mine/ic_yunshuzhong@3x.png"),
					path: "/pages/shop/order/orderList?key=3"

				}, {
					id: 4,
					name: "已完成",
					url: require("../../static/image/mine/ic_yiwancheng@3x.png"),
					path: "/pages/shop/order/orderList?key=4"
				}, {
					id: 5,
					name: "售后服务",
					url: require("../../static/image/mine/ic_shouhou@3x.png"),
					path: "/pages/shop/order/afterSale"
				}],
				navList: [{
						id: 1,
						name: "地址管理",
						url: require("../../static/image/mine/ic_dizhi@3x.png"),
						path: '/pages/shop/option/address/addressList'
					},
					{
						id: 2,
						name: "邀请好友",
						url: require("../../static/image/mine/ic_yaoqing@3x.png"),
						path: '',
						status: "code"
					},
					{
						id: 3,
						name: "意见反馈",
						url: require("../../static/image/mine/ic_yijian@3x.png"),
						path: '/pages/setting/feedback'
					},
					{
						id: 4,
						name: "关于我们",
						url: require("../../static/image/mine/ic_tousu@3x.png"),
						path: '/pages/setting/aboutUs'
					},
					{
						id: 5,
						name: "联系客服",
						url: require("../../static/image/mine/ic_kefu@3x.png"),
						path: '/pages/tabbar/service',
						status: "isTabbar"
					},
					{
						id: 6,
						name: "修改密码",
						url: require("../../static/image/mine/ic_mima@3x.png"),
						path: '/pages/shop/option/security/security'
					},
					{
						id: 7,
						name: "商城",
						url: require("../../static/image/mine/shop.png"),
						path: '/pages/tabbar/store',
						status: "isTabbar"
					}
				]
			};
		},
		onLoad() {
			// uni.hideTabBar()
		},
		onShow() {
			user_info().then(res => {
				this.userinfo = res.data.data
				uni.setStorageSync('userinfo', this.userinfo)
			})
		},
		methods: {
			// tabbar切换时触发
			change1(e) {
				console.log(e)
				uni.switchTab({
					url: this.tabList[e].url
				})
			},
			toPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			navTo(opt, e) {
				if (opt.status == "isTabbar") {
					uni.switchTab({
						url: opt.path
					})
				} else if (opt.status == "code") {
					uni.setClipboardData({
						data: this.userinfo.code,
						success: () => {
							uni.$u.toast("邀请码已复制")
						}
					})
				} else {
					if (opt.path && opt.path != "") {
						uni.navigateTo({
							url: opt.path
						})
					}
				}

			},
			ToOrder(opt) {
				uni.navigateTo({
					url: opt.path
				})
			},
			backtohome() {
				uni.switchTab({
					url: '/pages/tabbar/home'
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		//min-height: calc(100vh - 100rpx);
		height: 100vh;
		padding-top: var(--status-bar-height);
		background: url("../../static/image/mine/bg.png") no-repeat top / 100%;
		background-color: white;
		padding-bottom: 40rpx;

		.top {
			padding: 48rpx;
			/* #ifndef APP-PLUS */
			padding-top: 130rpx;
			/* #endif */
			/* #ifdef APP */
			padding-top: 72rpx;
			/* #endif */

			.avatar {
				flex-shrink: 0;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #fff;
			}

			.info {
				margin-left: 16rpx;
				color: #333333;

				.name {
					font-size: 36rpx;
					line-height: 50rpx;
					font-weight: 600;
				}

				.id {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					margin-top: 16rpx;
				}
			}
		}

		.content {
			width: 100%;

			.wallet {
				box-sizing: border-box;
				width: 100%;
				height: 338rpx;
				background: url("../../static/image/mine/bg_kaka.png") no-repeat center / 100%;

				padding: 24rpx 86rpx 0 96rpx;

				.left {
					color: #FFFFFF;

					.title {
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.detail {
						margin-top: 8rpx;
						font-size: 52rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 60rpx;
					}
				}
			}

			.list {
				transform: translateY(-100%);

				.item {
					flex: 1;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;

					.img {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 16rpx;

						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}

			.nav_list {
				padding: 0 42rpx 64rpx 54rpx;
				margin-top: -40rpx;
				background: linear-gradient(to bottom, #fafcfb, #fff, #fff, #fff, #fff);

				.item {
					height: 108rpx;

					.title {
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						font-weight: 600;

						.nav_icon {
							width: 40rpx;
							height: 40rpx;
							margin-right: 12rpx;
						}
					}
				}
			}
		}
	}
</style>